<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./font_ak3ewc96ioq/iconfont.css" />
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    text-decoration: none
  }

  .w {
    width: 1264px;
    margin: 0 auto;
  }


  /* /////////////////////////////// */


  /* //////////////////////////// */

  /* *a{text-decoration:none}  */

  input {
    outline: none;
  }

  li {
    list-style: none;
  }

  .content {
    height: 66px;
    padding: 8px;
    margin-top: 10px;
    position: relative;
  }

  .title div:nth-child(1) {
    width: 250px;
    height: 50px;
  }

  .title div:nth-child(1) img {
    height: 100%;
  }

  .title div:nth-child(2) {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
  }

  .title div:nth-child(2)::before {
    text-align: center;
    font-size: 33px;
    line-height: 62px;
  }

  .inputbox {
    height: 50px;
    border-bottom: 1px solid #ccc;
    margin-top: 25px;
    position: relative;
  }

  .inputbox input {
    border: 0;
    height: 50px;
    width: 1264px;
    font-size: 22px;
  }

  .inputbox span {
    position: absolute;
    font-size: 20px;
    color: #ccc;
    line-height: 50px;
    right: 15px;
    cursor: pointer;
  }

  #serarch_ul {
    list-style: none;
    border: 1px solid #ccc;
    border-top: 0;
    /* display: none; */
  }

  #serarch_ul li {
    height: 43px;
    padding-top: 10px;
    line-height: 43px;
    color: #ccc;
    text-indent: 10px;
  }

  #serarch_ul li:hover {
    background-color: rgb(238, 238, 241);
  }

  #toall {
    overflow: hidden;
    height: 33px;
    margin-top: 50px;
    position: absolute;
    top: 115px;
  }

  #toall li {
    float: left;
    width: 60px;
    line-height: 33px;
    height: 100%;
    margin: 0 5px 10px 0;
  }

  #toall li:hover {
    color: orangered;
    cursor: pointer;
  }

  .search ul {
    width: 100%;
    overflow: hidden;
  }

  .search ul li {
    float: left;
    width: 260px;
    height: 40px;
  }

  .search ul li span:nth-child(2) {
    display: inline-block;
    border: 1px solid rgb(0, 122, 255);
    color: rgb(0, 122, 255);
    width: 38px;
    border-radius: 5px;
    text-align: center;
    font-size: 15px;
  }

  #p_one {
    position: absolute;
    top: 400px;
    left: 0;
  }
</style>

<body>







  <div class="content w">
    <div class="title">
      <div>
        <img src="./images/title.jpg" alt="" />
      </div>
      <div class="iconfont icon-close"></div>
    </div>

    <div class="inputbox w">
      <input type="text" placeholder="OPPO K10X" class="s1" />
      <span class="s2">搜索</span>
    </div>
    <ul class="w" id="serarch_ul">
    </ul>
  </div>

  <div class="lllllll w" style="background-color:pink;">
    <ul></ul>
  </div>

</body>
<a href=""></a>
<script src="./js/_ajax.js"></script>
<script>
  const inputbox = document.querySelector(".inputbox input");
  const serarch_ul = document.querySelector("#serarch_ul");
  const s1 = document.querySelector(".s1");
  const s2 = document.querySelector(".s2");
  const lllllll = document.querySelector(".lllllll>ul");

  s2.onclick = function () {
    if (s1.value == "") {
      // console.log("搜索结果为空")
      serarch_ul.innerHTML = "<li>搜索结果为空</li>"
      return
    }
    ajax({
      type: "get",
      url: "http://localhost:3000/data",
      data: {
      },
      success: res => {
        var jso = JSON.parse(res).data
        // console.log(jso)
        function creat() {
          var value = s1.value;
          var html = "";
          let arrnew = jso.map((item, index) => {
            return Object.assign(
              {},
              {
                desc: item.title,
                pid: item.pid,
              }
            );
          });
          var newData = arrnew.filter((item) => {
            if (item.desc.indexOf(value) > -1) {
              //indexOf方法中如果xxx.indexOf("")返回值为0
              return item;
            }
            return newData;
          });

          if (newData.length > 0) {
            for (var i = 0; i < newData.length; i++) {
              html += `<a href="./soye.html?pid=${newData[i].pid}"><li>${newData[i].desc}</li></a>`;
            }
          } else {
            html += `<li>搜索结果为空,试一下输入大写</li>`;
          }
          serarch_ul.innerHTML = html
          console.log(html)
        }
        creat();
        s1.onchange = function () {
          creat();
        };
      },
      error: code => {
        console.log("error", code);
      },
    })
  }


</script>

</html>